<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>聊天记录</title>
    <style>
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, sans-serif;
        background-color: #f5f5f5;
      }

      .chat-header {
        font-size: 16px;
        margin-bottom: 10px;
      }

      .chat-container {
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        max-width: 800px;
        margin: 0 auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .message {
        display: flex;
        margin-bottom: 15px;
      }

      .message.user {
        justify-content: flex-end;
      }

      .message.ai {
        justify-content: flex-start;
      }

      .bubble {
        max-width: 60%;
        padding: 10px 15px;
        border-radius: 10px;
        position: relative;
      }

      .user .bubble {
        background-color: #daf1ff;
        text-align: right;
      }

      .ai .bubble {
        background-color: #f0f0f0;
      }

      .timestamp {
        font-size: 12px;
        color: #999;
        margin-bottom: 5px;
      }

      .emoji {
        font-size: 20px;
        margin-right: 5px;
      }

      .list-container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .list-item {
        display: flex;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
      }

      .list-item:last-child {
        border-bottom: none;
      }

      .list-item:hover {
        background-color: #f9f9f9;
      }

      .item-content {
        flex: 1;
      }

      .item-title {
        font-size: 16px;
        color: #333;
        margin-bottom: 4px;
      }

      .item-time {
        font-size: 14px;
        color: #666;
      }

      .item-count {
        background: #e0e0e0;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        margin: 0 16px;
      }

      .delete-btn {
        padding: 8px;
        background: none;
        border: none;
        cursor: pointer;
        color: #ff4d4f;
      }

      .delete-btn:hover {
        color: #ff7875;
      }

      /* 蒙版样式 */
      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
      }

      .modal-content {
        background: white;
        padding: 24px;
        border-radius: 8px;
        min-width: 300px;
        width: 50%;
        max-height: 80vh;
        /* 设置最大高度为 80% 的视口高度 */
        overflow-y: auto;
        /* 超出时出现垂直滚动条 */
        box-sizing: border-box;
        /* 确保 padding 不会撑大盒子 */
      }

      .modal-header {
        font-size: 18px;
        margin-bottom: 16px;
      }

      .modal-close {
        float: right;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="list-container">
      <div class="list-item" onclick="showModal('test', '2025-04-02 21:07:58')">
        <div class="item-content">
          <div class="item-title">test</div>
          <div class="item-time">2025-04-02 21:07:58</div>
        </div>
        <span class="item-count">22</span>
        <button
          class="delete-btn"
          onclick="event.stopPropagation(); deleteItem(this)"
        >
          ✕
        </button>
      </div>
      <div class="list-item" onclick="showModal('test', '2025-03-28 19:16:18')">
        <div class="item-content">
          <div class="item-title">test</div>
          <div class="item-time">2025-03-28 19:16:18</div>
        </div>
        <span class="item-count">10</span>
        <button
          class="delete-btn"
          onclick="event.stopPropagation(); deleteItem(this)"
        >
          ✕
        </button>
      </div>
      <div class="list-item" onclick="showModal('test', '2025-03-28 13:02:53')">
        <div class="item-content">
          <div class="item-title">test</div>
          <div class="item-time">2025-03-28 13:02:53</div>
        </div>
        <span class="item-count">6</span>
        <button
          class="delete-btn"
          onclick="event.stopPropagation(); deleteItem(this)"
        >
          ✕
        </button>
      </div>
      <!-- 更多列表项... -->
    </div>

    <!-- 蒙版弹窗 -->
    <div class="modal" id="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span id="modal-title"
            >对话详情 - 2025-04-02 21:07:58 &nbsp;&nbsp;&nbsp;&nbsp;
            设备：30:ed:a0:12:d7:40</span
          >
          <span class="modal-close" onclick="closeModal()">✕</span>
        </div>
        <div id="modal-body">
          <div class="message user">
            <div>
              <div class="timestamp">User 2025-04-02 21:05:04</div>
              <div class="bubble">喵喵同学</div>
            </div>
          </div>

          <div class="message ai">
            <div>
              <div class="timestamp">2025-04-02 21:05:04</div>
              <div class="bubble">
                <span class="emoji">😊</span>喵喵同学，咋了？有啥事儿吗
              </div>
            </div>
          </div>

          <div class="message user">
            <div>
              <div class="timestamp">User 2025-04-02 21:05:18</div>
              <div class="bubble">有说。</div>
            </div>
          </div>

          <div class="message ai">
            <div>
              <div class="timestamp">2025-04-02 21:05:18</div>
              <div class="bubble">
                <span class="emoji">😋</span>有啥事儿，说来听听？
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- 引入 Toastr 的 CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
      rel="stylesheet"
    />
    <!-- 引入 Toastr 的 JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script type="text/javascript" src="common/common.js"></script>
    <script>
      $(document).ready(function () {
        //调用统计接口
        ajaxGet(
          "chatHistory/getChatStatistic",
          null,
          "GET",
          function (response) {
            if (response.code == 200) {
              const htmlElement = chatListConstruct(response.data);
              $(".list-container").html(htmlElement);
            } else {
              toastr.error(response.msg);
            }
          }
        );
      });

      function chatListConstruct(data) {
        // 使用let而不是const，因为会对其进行多次修改
        let htmlElement = "";
        for (var index = 0; index < data.length; index++) {
          const element = data[index];
          htmlElement += `
			            <div class="list-item" onclick="showModal('${element.themeId}', '${
            element.createTime
          }')">
			                <div class="item-content">
			                    <div class="item-title">${element.title || index + 1}</div>
			                    <div class="item-time">${
                            element.createTime || "2025-04-02 21:07:58"
                          }</div>
			                </div>
			                <span class="item-count">${element.chatCount || 22}</span>
			                <button class="delete-btn" data-theme-id=${
                        element.themeId
                      }  onclick="event.stopPropagation(); deleteItem(this)">
			                    ✕
			                </button>
			            </div>
			        `;
        }
        return htmlElement;
      }

      function showModal(themeId, time) {
        const modal = document.getElementById("modal");
        const modalTitle = document.getElementById("modal-title");
        const modalBody = document.getElementById("modal-body");

        modalTitle.textContent = themeId;
        modalBody.textContent = `时间：${time}`;
        const data = {
          themeId: themeId,
        };
        ajaxGet(
          "chatHistory/getChatHistoryByThemeId",
          data,
          "GET",
          function (response) {
            if (response.code === 200) {
              const resultData = response.data;

              if (resultData.length > 0) {
                // 设置标题
                const createTime = resultData[0].createTime;
                const deviceId = data.deviceId || "未知设备"; // 如果设备号在 data 中
                $("#modal-title").text(
                  `对话详情 - ${createTime}    设备：${deviceId}`
                );

                // 清空旧内容
                $("#modal-body").empty();

                // 遍历结果并渲染
                $.each(resultData, function (index, item) {
                  // 用户提问
                  if (item.questionContent) {
                    const userMsg = `
						<div class="message user">
							<div>
								<div class="timestamp">User ${item.createTime}</div>
								<div class="bubble">${item.questionContent}</div>
							</div>
						</div>
					`;
                    $("#modal-body").append(userMsg);
                  }

                  // AI 回答
                  if (item.answerContent) {
                    const aiMsg = `
						<div class="message ai">
							<div>
								<div class="timestamp">${item.updateTime}</div>
								<div class="bubble">${item.answerContent}</div>
							</div>
						</div>
					`;
                    $("#modal-body").append(aiMsg);
                  }
                });
              }
            } else {
              toastr.error(response.msg);
            }
          }
        );

        modal.style.display = "flex";
      }

      function closeModal() {
        const modal = document.getElementById("modal");
        modal.style.display = "none";
      }

      function deleteItem(btn) {
        if (confirm("确定要删除这条记录吗？")) {
          //删除
          const themeId = $(btn).data("themeId");
          const data = {
            themeId: themeId,
          };
          ajaxPost(
            "chatHistory/deleteTheme",
            data,
            "POST",
            function (response) {
              if (response.code == 200) {
                toastr.success("删除成功!");
              } else {
                toastr.error(response.msg);
              }
            }
          );
          btn.closest(".list-item").remove();
        }
      }

      // 点击蒙版外部关闭弹窗
      window.onclick = function (event) {
        const modal = document.getElementById("modal");
        if (event.target == modal) {
          closeModal();
        }
      };
    </script>
  </body>
</html>
